<!-- 资讯服务，游记动态板块 -->
<template>
  <div class="rightTab">
    <div class="tab-item" v-for="(item, index) in rightTabData" :key="item.id"
      @mouseenter="mouseenterRightTab(index)"
      @mouseleave="mouseleaveRightTab(index)"
      @click="clickRightTab(index)">
      <div class="tab-img-con">
        <img v-if="index === num || index === clickNum" :src="require('_as/zixun-7.png')" alt="">
        <img v-else class="tab-img-bg" :src="require('_as/zixun-6.png')" alt="">

        <span class="tab-span">
          <span style="fontSize: 24px;width: 40px">{{item.num.split('-')[1]}}</span>
          <span style="fontSize: 14px;width: 40px">{{item.num.split('-')[0]}}</span>
        </span>
      </div>
      <div class="tab-right">
        <span class="title">{{item.title}}</span>
        <span class="cont">{{item.content}}</span>
        <!-- <a href="" class="moreBtn"  >查看详情 ></a> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rightTabData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      num: 0,
      clickNum: 0
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    mouseenterRightTab (index) {
      this.num = index
    },
    mouseleaveRightTab (index) {
      this.num = this.clickNum
    },
    clickRightTab (index) {
      this.clickNum = index
      this.$emit('clickRightTab', index)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.tab-item {
  position relative
  display flex
  justify-content center
  align-items center
  width 380px
  margin 10px 0
  &:hover {
    .tab-img-con {
      .tab-span {
        color #B80632
      }
    }
    .tab-right {
      color #B80632
    }
  }
  .tab-img-con {
    width 60px
    height 76px
    position relative
    img {
      width 100%
      height 100%
    }
    .tab-img-bg {
      position absolute
      top 0
      left 0
    }
    .tab-span {
      position absolute
      top 15px
      left 10px
      display flex
      flex-direction column
      align-items center
    }
  }
  .tab-right {
    margin-left 15px
    display flex
    flex-direction column
    align-items flex-start
    cursor default
    .title {
      font-size 20px
    }
    .cont {
      font-size 14px
      padding 12px 0 0
      width 240px
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap
    }
    .moreBtn {
      color #4285F4
      font-size 14px
    }
  }
}
</style>
